
//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";


@nav-width:200px;
@layout-padding-vertical:30px;
@layout-padding-horizontal:50px;
.doc{
	.full-box;
	.border-box;
	padding-left:@nav-width;
	overflow:auto;
	h3{margin-bottom:0.5em;}
	h4{margin-bottom:0.5em;}
	p{margin-bottom:0.5em;}
	.doc-nav{
		position:fixed;
		top:0;
		left:0;
		width:@nav-width;
		height:100%;
		background-color:@black;
		.text-color(#fff);
		.nav-section{
			padding:0 1em;
			border-bottom:1px solid lighten(@black, 10%);
		}
		ul{
			li{
				padding-left:1em;
			}
		}
	}
	.doc-body{
		width:100%;
		padding:@layout-padding-vertical @layout-padding-horizontal;
	}
	.doc-section{
		padding:30px 0;
		border-bottom:1px solid lighten(@grey, 40%);
		&:last-child{border-bottom:0;}
	}
}

//颜色
.colors{
	.color-item{
		@height:60px;
		height:@height;
		line-height:@height;
	}
}

//栅格
.grid{
	.col{
		@height:40px;
		height:@height;
		line-height:@height;
		margin-bottom:1em;
		background-color:lighten(@grey, 40%);
		&-dark{
			background-color:lighten(@grey, 20%);
		}
	}
}

//图标列表
.icon-list{
	li{
		width:100%/4;
		padding:0.5em;
		.fa{padding-right:0.5em; font-size:@font-size-large;}
	}
}









